<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>H5开门效果</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .door {
            width: 100%;
            height: 100%;
            position: relative;
            background: red;
            overflow: hidden;
        }
        .door .leftDoor, .door .rightDoor {
            position: absolute;
            width: 50%;
            height: 100%;
            cursor: pointer;
        }
        .door .leftDoor {
            left: 0;
            /*animation: leftDoor 5s 1;*/
            transition: transform 2s;
            transform-origin: 0% 40%;
            box-shadow: 2px 6px 10px rgba(0,0,0,.7);
        }
        .door .rightDoor {
            right: 0;
            /*animation: rightDoor 5s 1;*/
            transition: transform 2s;
            transform-origin: 100% 40%;
            box-shadow: -2px 6px 10px rgba(0,0,0,.7);
        }
        .door .leftDoorChange {
            transform: perspective(600px) rotateY(50deg);
        }
        .door .rightDoorChange {
            transform: perspective(600px) rotateY(-50deg);
        }
        .door img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="door">
        <div class="leftDoor"><img src="./images/left.png" alt="左侧大门"></div>
        <div class="rightDoor"><img src="./images/right.png" alt="右侧大门"></div>
    </div>
    <audio id="bgm" src="./images/door.mp3"></audio>

    <script>
        /**
        * H5开门效果。闭包封装防止变量污染
        * 时间：2018-02-01 
        * 作者：叶流痕
        */
        (function(window) {
            // 获取页面元素
            let door = document.querySelector('.door');
            let leftDoor = document.querySelector('.leftDoor');
            let rightDoor = document.querySelector('.rightDoor');
            let bgm = document.querySelector('#bgm');
            // 自适应屏幕高度
            door.style.height = window.innerHeight + 'px';
            // 绑定开门的事件处理函数
            leftDoor.addEventListener('click', openDoorHandler, false);
            rightDoor.addEventListener('click', openDoorHandler, false);
            leftDoor.addEventListener('transitionend', openedDoorHandler, false);
            rightDoor.addEventListener('transitionend', openedDoorHandler, false);
            /**
            * 开门处理，启用css动画
            */
            function openDoorHandler() {
                if (leftDoor.className == 'leftDoor')
                    leftDoor.className += ' leftDoorChange';
                if (rightDoor.className == 'rightDoor')
                    rightDoor.className += ' rightDoorChange';
                bgm.currentTime = 0.5; // 音频源问题从0.5秒开始
                bgm.play();
            }
            /**
            * 开门动画结束处理，跳转页面
            */
            function openedDoorHandler() {
                bgm.pause();
                //window.location = 'http://www.baidu.com';
            }
        })(window);
    </script>
</body>
</html>